import { View, Text, Video, Image } from "@tarojs/components";
import Taro, { useRouter } from "@tarojs/taro";
import { useEffect, useState } from "react";
import tipsImage from "@/assets/image/ico_tishi——two.svg";
import { AtImagePicker } from "taro-ui";
import "./index.scss";
import {
  back,
  getImageNumberByLevel,
  toast,
  uploadFilesList,
} from "@/helper/utils";
import { getStoreDetail, storeBiz } from "@/services/entities/all";
import { getGlobalData } from "@/global_data";
const Merchant = () => {
  const router = useRouter();
  const { params } = router;
  const { storeId: id } = params;
  const userInfo = getGlobalData("userInfo");
  const { level } = userInfo;
  const imageNum = getImageNumberByLevel(level);
  const [form, setForm] = useState<any>({
    videoUrls: "",
    imageUrls: [],
  });

  const onChange = (key, value) => {
    const temp = { ...form };
    temp[key] = value;
    console.log(temp);
    setForm(temp);
  };

  const chooseImage = (key, value: any) => {
    uploadFilesList(value).then((res) => {
      onChange(
        key,
        res.map((item) => item.data)
      );
    });
  };

  const chooseVideo = () => {
    Taro.chooseVideo({
      sourceType: ["album", "camera"],
      maxDuration: 60,
      camera: "back",
      success: function (res) {
        uploadFilesList([{ file: { path: res.tempFilePath } }]).then((res2) => {
          onChange("videoUrls", res2[0].data);
        });
      },
    });
  };

  useEffect(() => {
    if (id) {
      getStoreDetail({ id: id }).then((res: any) => {
        setForm({
          imageUrls: res.operationImageUrl
            ? res.operationImageUrl?.split(",")
            : [],
          videoUrls: res.operationVideoUrl,
        });
      });
    }
  }, [id]);

  const submit = () => {
    const result = {
      imageUrls: form.imageUrls.join(","),
      openId: userInfo.openId,
      videoUrls: form.videoUrls,
    };

    storeBiz(result).then(() => {
      back();
    });
  };
  return (
    <View className="bg-page">
      <View className="flex-column">
        <Text className="mg-tb-24 ml-22 fs-24 lh-36 cl-A4A4A4">
          添加商家经营图片&视频信息
        </Text>
        <View className="flex-column pl-4 pr-24 pd-tb-28 border-box bg-ffffff">
          <View className="mb-28 pl-20 border-box dis-flex align-center">
            <Text className="fs-28 lh-36 cl-848484">上传商家视频</Text>
            <View className="dis-flex align-center ml-24">
              <Image src={tipsImage} className="img-36" />
              <Text className="fs-24 lh-32 cl-E14848 ml-4">
                最多上传一个视频
              </Text>
            </View>
          </View>
          <View class="dis-flex">
            <View
              className="upload ml-20 fs-40 flex-center mb-80"
              onClick={chooseVideo}
            >
              {form.videoUrls ? (
                <Video className="video" src={form.videoUrls}></Video>
              ) : (
                <View className="add">
                  <View className="add-bar"></View>
                  <View className="add-bar-line"></View>
                </View>
              )}
            </View>
            {form.videoUrls && (
              <Text
                className="cl-E14848 fs-32 ml-12"
                onClick={() => {
                  onChange("videoUrls", "");
                }}
              >
                删除
              </Text>
            )}
          </View>
          <View className="mt-40 mb-28 pl-20 border-box dis-flex align-center">
            <Text className="fs-28 lh-36 cl-848484">上传商家图片</Text>
            <View className="dis-flex align-center ml-24">
              <Image src={tipsImage} className="img-36" />
              <Text className="fs-24 lh-32 cl-E14848 ml-4">
                {`最多上传${imageNum}张图片`}
              </Text>
            </View>
          </View>
          <AtImagePicker
            files={form.imageUrls.map((item) => {
              return { url: item };
            })}
            count={imageNum}
            multiple={true}
            onChange={(files) => {
              chooseImage("imageUrls", files);
            }}
          ></AtImagePicker>
        </View>
      </View>
      <View className="bottom pd-20  dis-flex align-center border-box">
        <View
          className="flex-1 flex-center pd-tb-20 border-box bg-ffffff br-8 fs-28 lh-38 cl-848484"
          onClick={back}
        >
          取消
        </View>
        <View className="empty"></View>
        <View
          className="flex-1 flex-center pd-tb-20 border-box bg-007DDB br-8 fs-28 lh-38 cl-white"
          onClick={submit}
        >
          提交
        </View>
      </View>
    </View>
  );
};

export default Merchant;
